import React from 'react';
import {
  WeaErrorPage, WeaTools, WeaLocaleProvider, WeaRightMenu, WeaColorPicker, WeaInputNumber,
  WeaFormItem, WeaSelect, WeaDialog, WeaTab, WeaSearchGroup, WeaInput, WeaMoreButton, WeaError
} from 'ecCom';
import { WeaTableNew, WeaLogView } from 'comsMobx';
import { Icon, Button, message, Select, Modal } from 'antd';
const { WeaTable, TableStore } = WeaTableNew;
const WeaLogViewComp = WeaLogView.Component;
const { LogStore } = WeaLogView;
const tableStore = new TableStore();
const getLabel = WeaLocaleProvider.getLabel;
import { isEqual, isEmpty, cloneDeep } from 'lodash';
//图表元素配色方案
class EchartColorScheme extends React.Component {
  state = {
    value: this.props.value,
    options: this.props.options
  };

  onChangeOptions (options) {
    this.setState({ options })
  }

  render () {
    const { moduleType = '', hpid, subCompanyId } = this.props;
    const { value, options } = this.state;
    return (
      <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8z5faf`} label={moduleType == 'odocCenter' ? getLabel(524511, '公文环节显示配色方案') : getLabel(516877, '配色方案')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
        <div className={'portal-esetting-reportform-echartColorScheme'} style={{ display: 'inline-block', width: '100%' }}>
          <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@u6lbw3`} ref="fillStyleSelect" size='large'
            style={{ width: '100%' }}
            dropdownClassName="portal-esetting-reportform-echartColorScheme-droptwo"
            dropdownMatchSelectWidth={true}
            onChange={value => {
              this.setState({
                value: value,
              });
            }} value={value}>
            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@74vklw`} className={'portal-imgSlide-images-option'} value={'0'} style={{ width: '100%' }}>
              <div className="portal-imgSlide-images-style-content-type" style={{ width: '100%' }}>
              </div>
            </Option>
            {
              options.map(item => {
                const valueArr = item.value.split(',');
                return (
                  <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@l35cii@${item.key}`} className={'portal-imgSlide-images-option'} value={item.key} style={{ width: '100%' }}>
                    <div className="portal-imgSlide-images-style-content-type" style={{ width: '100%' }}>
                      {
                        valueArr.map((item, index) => {
                          if (moduleType == 'odocCenter') {
                            const value = item.split('=');
                            if (index < 6) {
                              return <div style={{ backgroundColor: value[0], color: value[1], width: '18px', height: '20px', lineHeight: '20px', textAlign: 'center', float: 'left', marginLeft: '5px', marginTop: '5px' }}>{index + 1}</div>
                            }
                          } else {
                            if (index < 4) {
                              return <div style={{ backgroundColor: item, width: '22px', height: '22px', float: 'left', marginLeft: '5px', marginTop: '2px' }} />
                            }
                          }
                        })
                      }
                      <span className="portal-imgSlide-images-style-content-span" style={{ paddingLeft: '8px' }}>{item.showname}</span>
                    </div>
                  </Option>
                );
              })
            }
          </Select>
        </div>
        <ColorSchemeSetting ecId={`${this && this.props && this.props.ecId || ''}_ColorSchemeSetting@b3peh0`} moduleType={moduleType} eid={this.props.eid} hpid={this.props.hpid} subCompanyId={this.props.subCompanyId} onChangeOptions={this.onChangeOptions.bind(this)} />
      </WeaFormItem>
    );
  }
}
class MyErrorHandler extends React.Component {
  render () {
    const hasErrorMsg = this.props.error && this.props.error !== "";
    return (
      <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@43cf2k`} msg={hasErrorMsg ? this.props.error : getLabel(385218, "对不起，该页面异常，请联系管理员！")} />
    );
  }
}


class ColorSchemeSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
      visible: false,
      title: '',
      logVisible: false,
      logTargetId: "",
      logStore: new LogStore(),
      editVisible: false,
      selectedRowKeys: [],
      name: '',
      loading: false,
      isAddColorSchemes:true
    };
    this.getButtons = this.getButtons.bind(this);
    this.getRightMenu = this.getRightMenu.bind(this);
    this.onRightMenuClick = this.onRightMenuClick.bind(this);
    this.getSessionKey = this.getSessionKey.bind(this);
    this.onOperatesClick = this.onOperatesClick.bind(this);
    this.onLogVisibleChange = this.onLogVisibleChange.bind(this);
    this.edit = this.edit.bind(this);
    this.getColumns = this.getColumns.bind(this);
    this.delete = this.delete.bind(this);
  }

  getButtons () {
    let buttons = [];
    buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@grpt8m`} datas={this.getRightMenu()} />);
    return buttons;
  }

  getRightMenu () {
    const { selectedRowKeys } = this.state;
    let btns = [];
    btns.push({
      key: '0',
      icon: <i className='icon-coms-Preservation' />,
      content: getLabel(365, '新建'),
      onClick: () => this.edit({ type: '0', value: '' }, true)
    });
    btns.push({
      key: '1',
      icon: <i className='icon-coms-go-back' />,
      disabled: !selectedRowKeys,
      content: getLabel(32136, '批量删除'),
      onClick: () => this.delete(this.state.selectedRowKeys)
    });
    btns.push({ key: 'log', icon: <i className='icon-coms-Print-log' />, content: getLabel(83, '日志'), onClick: this.onLogVisibleChange });
    return btns;
  }

  onRightMenuClick (key) {
    switch (key) {
      case '0':
        this.edit({ type: '0', value: '' }, true);
        break;
      case '1':
        this.delete(this.state.selectedRowKeys);
        break;
    }
  }

  getSessionKey (params = {}) {
    this.setState({ visible: true, loading: true });
    if (this.state.sessionkey) {
      const { current = 1 } = tableStore;
      if (!params.current) {
        params.current = current;
      }
    }
    if (params.name === undefined) {
      params.name = this.state.name;
    }
    if (this.props.moduleType == 'odocCenter') {
      params.moduleType = 'odocCenter';
    }
    WeaTools.callApi('/api/portal/colorscheme/datas', 'POST', params).then(data => {
      const status = data.status || '1';
      if (status == '1') {
        this.setState({
          sessionkey: data.sessionkey,
          loading: false,
          title: params.title,
          creator: params.creator,
          showSearchAd: false,
          selectedRowKeys: '',
        });
        tableStore.getDatas(data.sessionkey, 1);
      } else if (status == '2') {
        message.error(data.errormsg);
        return;
      }
    });
  }


  onOperatesClick (record, index, operate, flag) {

    if (operate.index == '0') { // 编辑
      this.edit(record, true,false);
    } else if (operate.index == '1') { // 删除
      this.delete(record.randomFieldId);
    } else if (operate.index == '2') { // 日志
      this.onLogVisibleChange(record.randomFieldId);
    }
  }

  onLogVisibleChange (logTargetId) {
    this.setState({
      logVisible: !this.state.logVisible,
      logTargetId: logTargetId
    })
  }

  edit (obj, value,isAdd=true) {
    if (this.props.moduleType == 'odocCenter') {
      this.refs.colorSchemeEdit.setState({
        id: obj.randomFieldId,
        name: obj.name,
        type: obj.type,
        value: obj.valuespan || '',
        num: obj.num,
      })
    } else {
      this.refs.colorSchemeEdit.setState({
        id: obj.randomFieldId,
        name: obj.name,
        type: obj.type,
        value: obj.value,
        num: obj.num,
      })
    }

    this.setState({
      editVisible: value,
      isAddColorSchemes: isAdd
    })
  }

  getColumns (columns) {
    const { moduleType } = this.props;
    return columns.map((col) => {
      if (col.dataIndex == 'name') {
        return {
          ...col,
          oldWidth: '15%',
          render: (text, record, index) => {
            return (
              <div className="wea-url">
                <a href="javascript:;" onClick={() => this.edit(record, true,false)}>{record.namespan}</a>
              </div>
            );
          }
        };
      } else if (col.dataIndex == 'type') {
        return {
          ...col,
          render: (text, record, index) => {
            let value = getLabel(131372, '自定义');
            if (record.type == '1') {
              value = getLabel(468, '系统')
            }
            return (
              <div className="wea-url">
                {value}
              </div>
            );
          }
        };
      } else if (col.dataIndex == 'value') {
        if (moduleType == 'odocCenter') {
          return {
            ...col,
            render: (text, record, index) => {
              const valueArr = record.valuespan.split(',');
              return (
                <div className="wea-url">
                  {
                    valueArr.map((items, index) => {
                      const item = items.split('=')
                      if (index < 6) {
                        return <div style={{ backgroundColor: item[0], width: '18px', height: '20px', float: 'left', marginLeft: '5px', lineHeight: '20px', textAlign: 'center', color: item[1], fontSize: '14px' }}>{index + 1}</div>
                      }
                    })
                  }
                </div>
              );
            }
          };
        } else {
          return {
            ...col,
            render: (text, record, index) => {
              const valueArr = record.value.split(',');
              return (
                <div className="wea-url">
                  {
                    valueArr.map((item, index) => {
                      if (index < 4) {
                        return <div style={{ backgroundColor: item, width: '24px', height: '24px', float: 'left', marginLeft: '5px' }} />
                      }
                    })
                  }
                </div>
              );
            }
          };
        }
      } else if (col.dataIndex == 'num') {
        return {
          ...col,
          render: (text, record, index) => {
            return (
              <div className="wea-url">
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@q9wozl`}
                  value={record.num}
                  precision={1}
                  viewAttr={1}
                />
              </div>
            );
          }
        };
      } else {
        return col;
      }
    });
  }

  delete (ids) {
    Modal.confirm({
      title: getLabel(15172, '系统提示'),
      content: getLabel(385625, '确定要删除选择的记录吗？'),
      onOk: () => {
        const params = { ids: ids }
        if (this.props.moduleType == 'odocCenter') { params.moduleType = 'odocCenter' }
        WeaTools.callApi('/api/portal/colorscheme/delete', 'POST', params).then(data => {
          if (data.api_status == 'success') {
            message.success(getLabel(20461, '删除成功'));
            this.getSessionKey();
            this.setState({
              selectedRowKeys: [],
            });
          } else {
            message.success(getLabel(20462, '删除失败'));
          }

        });
      }
    });


  }

  render () {
    const { visible, value, title, logVisible, logTargetId, logStore, editVisible, selectedRowKeys, loading, isAddColorSchemes } = this.state;
    let rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys: `${selectedRowKeys}` });
      },
    }
    const themeInfo = WeaTools.ls.getJSONObj('theme-themeInfo');
    let buttonPaddingRight = '210px';
    if (themeInfo != null) {
      const { themeFontSize = '12' } = themeInfo;
      if (themeFontSize == '14') {
        buttonPaddingRight = '230px';
      } else if (themeFontSize == '16') {
        buttonPaddingRight = '250px';
      }
    }

    return (
      <div style={{ display: 'inline-block' }}>
        <div style={{ position: 'absolute', top: '5px', right: '-33px' }}>
          <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@yobr9a`}
            type="setting"
            title={getLabel(30747, '设置')}
            className="synergy-setting-btn synergy-setting-btn-setting"
            onClick={() => this.getSessionKey({ title: '', creator: '', current: 1 })}
          />
        </div>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ifef8k`}
          title={getLabel(516878, '配色方案设置')}
          visible={visible}
          closable={true}
          loading={loading}
          onCancel={() => {
            const params = {
              eid: this.props.eid,
              ebaseid: (this.props.moduleType =='odocCenter' || this.props.moduleType =='odocConten') ? 'odocCenter' : 'reportForm',
              hpid: this.props.hpid,
              subCompanyId: this.props.subCompanyId,
            };
            let colorSchemeOptions = [];
            this.setState({ loading: true })
            WeaTools.callApi('/api/portal/setting/esetting', 'POST', params).then(data => {
              if (this.props.moduleType == 'odocCenter') {
                if (data && data.eContent && data.eContent.eTabs && data.eContent.eTabs.tabNew && data.eContent.eTabs.tabNew.odocLinkColorSchemeOptions) {
                  colorSchemeOptions = data.eContent.eTabs.tabNew.odocLinkColorSchemeOptions;
                  this.props.onChangeOptions(colorSchemeOptions);
                }
              } else if (this.props.moduleType == 'odocConten') {
                if (data && data.eContent && data.eContent.eTabs && data.eContent.eTabs.tabNew && data.eContent.eTabs.tabNew.odocColorSchemeOptions) {
                  colorSchemeOptions = data.eContent.eTabs.tabNew.odocColorSchemeOptions;
                  this.props.onChangeOptions(colorSchemeOptions);
                }
              } else {
                if (data && data.eContent && data.eContent.eTabs && data.eContent.eTabs.tabNew && data.eContent.eTabs.tabNew.colorSchemeOptions) {
                  colorSchemeOptions = data.eContent.eTabs.tabNew.colorSchemeOptions;
                  this.props.onChangeOptions(colorSchemeOptions);
                }
              }
              this.setState({ visible: false, name: '', loading: false })
            });
          }}
          icon='icon-coms-portal'
          iconBgcolor='#1a57a0'
          maskClosable={false}
          buttons={this.getButtons()}
          style={{ width: this.props.moduleType == 'odocCenter' ? 700 : 660, height: 490 }}
        >
          {
            logTargetId == 'log' ? <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@gdp9d1`} visible={logVisible} onCancel={this.onLogVisibleChange} logStore={logStore} logType="6" logSmallType="29" /> :
              <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@pj9dca`} visible={logVisible} onCancel={this.onLogVisibleChange} logStore={logStore} logType="6" logSmallType="29" targetId={logTargetId} />
          }
          <ColorSchemeEdit ecId={`${this && this.props && this.props.ecId || ''}_ColorSchemeEdit@13ufz3`} ref={'colorSchemeEdit'} visible={editVisible} edit={this.edit} moduleType={this.props.moduleType} getSessionKey={this.getSessionKey} isAddColorSchemes={isAddColorSchemes} />
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@4jynbs`} datas={this.getRightMenu()} >
            <div>
              <div style={{ lineHeight: '60px' }}>
                <div style={{ position: 'absolute', zIndex: '2', right: this.props.moduleType == 'odocCenter' ? '260px' : buttonPaddingRight, top: '-7px' }}>
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2cwe3r`} type="primary" className="portal-esetting-wsg-btn" onClick={() => { this.edit({ type: '0', value: '' }, true) }}>
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@j25an3`} type="plus" style={{ color: '#fff' }} />
                  </Button>
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ei1wje`} type="primary" className="portal-esetting-wsg-btn" disabled={selectedRowKeys.length == 0} onClick={() => { this.delete(selectedRowKeys) }}>
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@ti6d06`} type="minus" style={{ color: '#fff' }} />
                  </Button>
                </div>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1hlp15`}
                  datas={[]}
                  searchType={['base']}
                  showSearchAd={this.state.showSearchAd}
                  searchsBaseValue={name}
                  advanceHeight={108}
                  keyParam="name"  //主键
                  countParam="groupid" //数量
                  onSearch={() => this.getSessionKey()}
                  rowSelection={rowSelection}
                  onSearchChange={value => this.setState({ name: value })}
                />
              </div>
              <div>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@6kpb6x`} needScroll={true} rowSelection={rowSelection} comsWeaTableStore={tableStore} onOperatesClick={this.onOperatesClick} getColumns={this.getColumns} />
              </div>
            </div>
          </WeaRightMenu>
        </WeaDialog>
      </div>
    );
  }
}


class ColorSchemeEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible,
      id: '',
      name: '',
      num: '',
      value: '',
      type: '',
      selectedRowKeys: [],
    };
    this.addColorScheme = this.addColorScheme.bind(this);
    this.getButtons = this.getButtons.bind(this);
    this.onChangeColorValue = this.onChangeColorValue.bind(this);
    this.addColorScheme = this.addColorScheme.bind(this);
    this.deleteColorScheme = this.deleteColorScheme.bind(this);
    this.getRowSelection = this.getRowSelection.bind(this);
    this.getRightMenu = this.getRightMenu.bind(this);
    this.onOk = this.onOk.bind(this);
    this.onChangeOdocColorValue = this.onChangeOdocColorValue.bind(this);
  }

  componentWillReceiveProps (nextProps) {
    if (!isEqual(nextProps, this.props)) {
      this.setState({
        visible: nextProps.visible
      });
    }
  }

  getButtons () {
    let buttons = [];
    buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r22ixj`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
    this.props.moduleType != 'odocCenter' && buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@qaoby9`} datas={this.getRightMenu()} />);
    return buttons;
  }

  onChangeColorValue (v, index) {
    const { value } = this.state;
    let valueArr = value.split(',');
    valueArr[index] = v;
    this.setState({
      value: valueArr + ''
    });
  }

  onChangeOdocColorValue (v, index, type) {
    const { value } = this.state;
    let valueArr = value.split(',');
    const color = valueArr[index].split('=');
    valueArr[index] = type == 'back' ? v + '=' + color[1] : color[0] + '=' + v
    this.setState({
      value: valueArr + ''
    });
  }

  onRowSelect = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  addColorScheme () {
    const { value } = this.state;
    let valueArr = value.split(',');
    if (valueArr.length == '1' && valueArr[0] == '') {
      valueArr = this.props.moduleType == 'odocCenter' ? ['#CB7367=#CB7367'] : ['#CB7367'];
    } else {
      valueArr.push(valueArr[valueArr.length - 1]);
    }
    this.setState({
      value: valueArr + ''
    })
  }

  deleteColorScheme () {
    const { value, selectedRowKeys } = this.state;
    let valueArr = value.split(',');
    if (valueArr.length == 1 && valueArr[0] == '') {
      valueArr = [];
    }
    valueArr = valueArr.map((item, index) => {
      return { value: item, key: index }
    })
    selectedRowKeys.map(item => {
      valueArr.map((i, index) => {
        if (item == i.key) {
          valueArr.splice(index, 1);
        }
      })
    })

    valueArr = valueArr.map(item => {
      return item.value;
    })


    this.setState({
      value: valueArr + '',
      selectedRowKeys: []
    })
  }

  onOk () {
    const { edit, getSessionKey,isAddColorSchemes } = this.props;
    if (!this.state.name) {
      this.name.showError();
      return;
    }
    if (!this.state.num) {
      this.num.showError();
      return;
    }
    if (this.state.value.split(',').length < 4) {
      message.warn(getLabel(516879, '配色设置过少可能导致图表中图例颜色重复过多，请至少设置4个色值'));
    } else {
      let params = { ...this.state }
      if (this.props.moduleType == 'odocCenter') {
        params.moduleType = 'odocCenter'
      }
      WeaTools.callApi('/api/portal/colorscheme/update', 'POST', params).then(data => {
        if (data.api_status == 'success') {
          message.success(getLabel(22619, '保存成功'));
          getSessionKey();
          edit('', false, isAddColorSchemes);
        } else {
          message.success(data.error_msg || getLabel(22620, '保存失败'));
        }
      });
    }
  }

  getRowSelection (rowSelection) {
    const sel = { ...rowSelection };
    sel.getCheckboxProps = record => {
      return { disabled: this.state.type == "1" };
    };
    return this.state.type == "1" ? null : sel;
  }

  getRightMenu () {
    let btns = [];
    btns.push({
      icon: <i className='icon-coms-Preservation' />,
      content: getLabel(826, '确定'),
      onClick: key => { this.onOk() }
    });
    return btns
  }

  render () {
    const { isAddColorSchemes } = this.props;
    const { visible, name, num, value = "", selectedRowKeys, type } = this.state;
    let showadd = true;
    if (type == '1') {
      showadd = false;
    }
    const valueArr = value.split(',')
    const { edit, moduleType } = this.props;
    let editColorCol = [];
    const colorSchemes = isAddColorSchemes ? getLabel('', '添加配色方案') : getLabel(516880, '编辑配色方案');
    moduleType != 'odocCenter' ?
      editColorCol.push({
        title: getLabel(516882, '颜色设置'),
        dataIndex: "name",
        key: "name",
        com: [
          {
            type: "CUSTOM",
            key: "name",
            render: (text, record, index) => (
              <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@lllmv9@${index}`}
                viewAttr={this.state.type == '1' ? '1' : '2'}
                style={{ width: '209px', float: 'left' }}
                value={record.name}
                needCommonPanel
                onChange={v => this.onChangeColorValue(v, index)}
              />
            )
          }
        ]
      })
      :
      editColorCol.push({
        title: getLabel('', '背景颜色'),
        dataIndex: "bacColor",
        key: "bacColor",
        com: [
          {
            type: "CUSTOM",
            key: "bacColor",
            render: (text, record, index) => {
              const value = record.name.split('=');
              return (
                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@zgc19t@${index}`}
                  viewAttr={this.state.type == '1' ? '1' : '2'}
                  style={{ width: '169px', float: 'left' }}
                  value={value[0]}
                  needCommonPanel
                  onChange={v => this.onChangeOdocColorValue(v, index, 'back')}
                />
              )
            }
          }
        ]
      }, {
        title: getLabel('', '字体颜色'),
        dataIndex: "fontColor",
        key: "fontColor",
        com: [
          {
            type: "CUSTOM",
            key: "fontColor",
            render: (text, record, index) => {
              const value = record.name.split('=');
              return (
                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@l7ngho@${index}`}
                  viewAttr={this.state.type == '1' ? '1' : '2'}
                  style={{ width: '169px', float: 'left' }}
                  value={value[1]}
                  needCommonPanel
                  onChange={v => this.onChangeOdocColorValue(v, index, 'font')}
                />
              )
            }
          }
        ]
      })

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@m8chou`}
        className="portal-esetting-dialog"
        title={colorSchemes}
        visible={visible}
        closable={true}
        onCancel={() => edit('', false)}
        icon='icon-coms-portal'
        iconBgcolor='#1a57a0'
        maskClosable={false}
        buttons={this.getButtons()}
        style={{ width: 600, height: 499 }}
        hasScroll
      >
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@t6a82t`} title={getLabel(1361, '基本信息')} needTigger={true} showGroup={true}>
          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bs8mqv`} label={getLabel(516881, '配色方案名称')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@m7h41c`}
              style={{ width: '100%' }}
              ref={el => { this.name = el }}
              error={getLabel(385021, '数据为空')}
              tipPosition={'bottom'}>
              <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zj527n`} inputType="multilang" isBase64={true} value={name} viewAttr={3} onChange={value => this.setState({ name: value })} />
            </WeaError>
          </WeaFormItem>
          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ti30sa`} label={getLabel(128719, '显示顺序')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@0y73mm`}
              style={{ width: '100%' }}
              ref={el => { this.num = el }}
              error={getLabel(385021, '数据为空')}
              tipPosition={'bottom'}>
              <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@aujv9w`} viewAttr={3} precision={1} value={num} onChange={value => this.setState({ num: value })} />
            </WeaError>
          </WeaFormItem>
        </WeaSearchGroup>
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9m4p5d`} title={getLabel(516882, '配色设置')} showGroup={true} center={true}>
          {
            showadd && <div style={{ position: 'absolute', zIndex: '2', right: '34px', top: '-30px' }}>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7f7ln8`} type="primary" className="portal-esetting-wsg-btn" onClick={this.addColorScheme}>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nb8rwp`} type="plus" style={{ color: '#fff' }} />
              </Button>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e9j76i`} type="primary" className="portal-esetting-wsg-btn" onClick={this.deleteColorScheme} disabled={selectedRowKeys.length == 0}>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@fjsd80`} type="minus" style={{ color: '#fff' }} />
              </Button>
            </div>
          }
          {
            valueArr.length > 0 && valueArr[0] != '' && <ecCom.WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@6vm0sq`}
              datas={valueArr.map((item, index) => {
                return { id: index, name: item }
              })}
              showAdd={false}
              showDelete={false}
              showCopy={false}
              draggable={type != '1'}
              draggableType={"icon"}
              onRowSelect={this.onRowSelect}
              getRowSelection={this.getRowSelection}
              selectedRowKeys={selectedRowKeys}
              onChange={(value) => {
                let attr = ""
                value.map((item, index) => {
                  if (index + 1 == value.length) {
                    attr += item.name;
                  } else {
                    attr += item.name + ',';
                  }
                })
                this.setState({
                  value: attr
                })
              }}
              columns={editColorCol}
            />
          }
        </WeaSearchGroup>
      </WeaDialog>
    );
  }
}

EchartColorScheme = WeaTools.tryCatch(React, MyErrorHandler, {
  error: ""
})(EchartColorScheme);

export default EchartColorScheme;